<template>
  <el-card class="swiper-container">
    <template #header>
      <div class="header">
        <div class="search">
          <el-select class="ml-10" placeholder="状态" v-model="params.status"
            @change="getList()">
            <template #prefix>
              <div class="pl-10px">状态：</div>
            </template>
            <el-option v-for="item in [
                {value: 0, label: '全部'},
                {value: 100, label: '待审核'},
                {value: 200, label: '已通过'}
              ]"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </div>
      </div>
    </template>

    <!-- 列表数据 -->
    <el-table class="table-row-optimize"
      v-loading="state.loading" tooltip-effect="dark"
      ref="multipleTable" :data="state.tableData"
      style="width: 100%">
      <!--<el-table-column type="selection" width="45"/>-->
      <el-table-column v-viewer label="" align="center" width="80">
        <template #default="scope">
          <div class="user-avatar">
            <img width="48" :src="scope.row.user?.avatar"
              @click="preview(scope.row)"
              :alt="scope.row.user?.nickname"/>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="nickname" label="抽奖者" width="160">
        <template #default="scope">
          {{ scope.row.user?.nickname }}
        </template>
      </el-table-column>
      <el-table-column prop="user.phone" label="手机号" align="center" width="150"/>
      <el-table-column prop="remark" label="描述内容" align="center"/>
      <el-table-column label="抽奖时间" align="center" width="200">
        <template #default="scope">
          {{ toDateTime(scope.row.created_at) }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" width="100">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 100">待审核</el-tag>
          <el-tag v-else type="success">已通过</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="120">
        <template #default="scope">
          <!-- 已储值的用户，不能继续储值操作 -->
          <el-popconfirm v-if="scope.row.status === 100"
            width="220"
            confirm-button-text="确定"
            cancel-button-text="取消"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="确认奖金已发放？"
            @confirm="updated(scope.row)">
            <template #reference>
              <el-button type="primary">通过</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <!--总数超过一页，再展示分页器-->
    <el-pagination
      background
      layout="prev, pager, next, total"
      :total="state.total"
      :page-size="params.limit"
      :current-page="params.page"
      @current-change="changePage"
    />
  </el-card>

  <!-- Image Preview -->
  <viewer :images="images">
    <img v-for="src in images" :key="src" :src="src">
  </viewer>
</template>

<script setup>
import { InfoFilled } from '@element-plus/icons-vue'
import { toDateTime } from "../../utils";
import { ElMessage } from "element-plus";
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import { AdminUserLuckyDrawRecordGet, AdminUserLuckyDrawRecordPost } from "../../api/server/user";

const { proxy } = getCurrentInstance()
const images = ref([])
const state = reactive({
  loading: false,
  tableData: [], // 数据列表
  checkedIds: [], // 选中项
  total: 0, // 总条数
});
const params = reactive({
  page: 1,
  limit: 10,
  status: 0
})

onMounted(() => {
  getList()
})

const getList = async () => {
  state.loading = true;

  const { data, total, current_page } = await AdminUserLuckyDrawRecordGet(params)
  state.tableData = data
  state.total = total
  params.page = current_page
  state.loading = false;
}

const preview = (row) => {
  console.info(row)
  proxy.$viewerApi({ images: [row.avatar] })
}

const updated = async (row) => {
  const { code, msg } = await AdminUserLuckyDrawRecordPost(row.id)
  ElMessage.success(code === 200 ? '审核成功' : msg)
  await getList()
}

const changePage = (page) => {
  params.page = page
  getList()
}

</script>

<style scoped>


</style>
